<template>
  <view class="information-container">
    <view class="info-section">
      <view class="info-item">
        <view class="info-label">姓名</view>
        <view class="info-value">{{ merchantInfo.name }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">身份证号码</view>
        <view class="info-value">{{ merchantInfo.idCardNumber }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">手机号</view>
        <view class="info-value">{{ merchantInfo.phoneNumber }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">店名</view>
        <view class="info-value">{{ merchantInfo.storeName }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">工商营业执照号码</view>
        <view class="info-value">{{ merchantInfo.licenseNumber }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">经营区域</view>
        <view class="info-value">{{ merchantInfo.businessArea }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">地址</view>
        <view class="info-value">{{ merchantInfo.address }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">商家介绍</view>
        <view class="info-value description">{{ merchantInfo.description }}</view>
      </view>
    </view>
    
    <view class="image-section">
      <view class="image-item">
        <view class="info-label">营业执照</view>
        <view class="image-placeholder">
          <text class="image-hint">📄</text>
        </view>
      </view>
      
      <view class="image-item">
        <view class="info-label">门面照片</view>
        <view class="image-placeholder">
          <text class="image-hint">🏪</text>
        </view>
      </view>
      
      <view class="image-item">
        <view class="info-label">身份证正反面</view>
        <view class="id-card-container">
          <view class="image-placeholder">
            <text class="image-hint">🪪</text>
          </view>
          <view class="image-placeholder">
            <text class="image-hint">🪪</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="action-section">
      <button class="edit-button" @click="handleEdit">修改</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 模拟商户数据
const merchantInfo = ref({
  name: '张三',
  idCardNumber: '40365236541232563',
  phoneNumber: '18893039203',
  storeName: '店小二',
  licenseNumber: '4252336467474764646',
  businessArea: '焦作市山阳区',
  address: '山阳区迎宾路32号',
  description: '商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍'
});

// 处理修改按钮点击
const handleEdit = () => {
  // 跳转到修改信息页面
  uni.navigateTo({
    url: '/pages/information/updateInfomation'
  });
};
</script>

<style scoped>
.information-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.info-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  width: 220rpx;
  font-size: 28rpx;
  color: #666;
  margin-right: 40rpx;
}

.info-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: left;
  word-break: break-all;
}

.description {
  line-height: 44rpx;
}

.image-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
}

.image-item {
  margin-bottom: 30rpx;
}

.image-item:last-child {
  margin-bottom: 0;
}

.image-placeholder {
  margin-top: 20rpx;
  width: 100%;
  height: 400rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-hint {
  font-size: 120rpx;
}

.id-card-container {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.id-card-container .image-placeholder {
  flex: 1;
  height: 280rpx;
}

.action-section {
  padding: 0 20rpx 40rpx;
}

.edit-button {
  background-color: #007aff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
}

.edit-button:active {
  opacity: 0.8;
}
</style>